<!DOCTYPE html>
<html>
 
    <style>
        li {
            width: 300px;
            height: 300px;
        }
        
        .ul {
            width: 909px;
            height: 909px;
        }
        
        .ul li {
            float: left;
            border: 1px solid #000000;
            list-style: none;
            line-height: 300px;
            text-align: center;
            font-size: 50px;
        }
    </style>
 
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
 
    <body>
        <div class="ul">
            <li class="li1">1.Css</li>
            <li class="li2">2.JavaScript</li>
            <li class="li3">3.Html</li>
            <li class="li8">8.Jquery</li>
            <li id="listart">开始</li>
            <li class="li4">4.Vue</li>
            <li class="li7">7.React</li>
            <li class="li6">6.Webpack</li>
            <li class="li5">5.Angular</li>
        </div>

        <script>
        	(e=>{


            var last_index = 0, //上一回滚动的位置
                amplification_index = 0, //轮盘的当前滚动位置,0表示为第一次
                roll_flag = true, //是否允许滚动
                max_number = 8, //轮盘的全部数量
                speed = 300, //速度，速度值越大，则越慢 初始化为300
                finalindex = 3, //最终的奖励
                myInterval = "", //定时器
                max_speed = 40, //滚盘的最大速度
                minturns = 8, //最小的圈数为2
                runs_now = 0; //当前已跑步数

				document.getElementById("listart").onclick = function () {
					runs_now = 0;
					//当前可以点击的状态下
					if(roll_flag) {
					    roll_flag = false;
					    //启动滚盘，注，若是最终后台无返回就不好意思里
					    rolling();
					}
				};
           

 
            //滚动轮盘的动画效果
            function rolling() {
                myInterval = setTimeout(function() {
                    rolling();
                }, speed);
                runs_now++; //已经跑步数加一
                amplification_index++; //当前的加一
                //获取总步数，接口延迟问题，所以最后还是设置成1s以上
                var count_num = minturns * max_number + finalindex - last_index;
                console.log(count_num);
                //上升期间
                if(runs_now <= (count_num / 3) * 2) {
                    speed -= 30; //加速
                    if(speed <= max_speed) {
                        speed = max_speed; //最高速度为40；
                    }
                }
                //抽奖结束
                else if(runs_now >= count_num) {
                    clearInterval(myInterval);
                    last_index = amplification_index;
                    roll_flag = true;
                }
                //下降期间
                else if(count_num - runs_now <= 10) {
                    speed += 20;
                }
                //缓冲区间
                else {
                    speed += 10;
                    if(speed >= 100) {
                        speed = 100; //最低速度为100；
                    }
                }
                if(amplification_index > max_number) { //判定！是否大于最大数
                    amplification_index = 1;
                }
 
                //全部清除
                var x = document.querySelectorAll("li");
				for (var i = 0; i < x.length; i++) {
				    x[i].style.backgroundColor = "white";
				}
                //画颜色
                document.querySelector(".li"+amplification_index).style.backgroundColor = "red";
                
            }

            })()
        </script>
    </body>
 
</html>